import { useState, useEffect } from 'react'
import './App.css'
import * as PIXI from 'pixi.js'

function App() {
  // const [type, setType] = useState("WebGL")
  // if(!PIXI.utils.isWebGLSupported()){
  //   setType("canvas")
  // }

  const [app, setApp] = useState(new PIXI.Application({
    width: 700,
    height: 500,
    backgroundAlpha: 0.8, // default: 1 值从 0（完全透明）到 1（完全不透明）
    resolution: 1,       // default: 1 分辨率
    antialias: true,    // default: false 抗锯齿
  }))

  const [sprite, setSprite] = useState(PIXI.Sprite.from('img/sample.png'))

  useEffect(() => {
    app.renderer.backgroundColor = 0xff66a5;
    document.getElementById('app').appendChild(app.view);
    app.stage.addChild(sprite);
    // 告诉我们的应用程序的自动收报机每帧运行一个新的回调，传递
    // 自上次刻度以来经过的时间量
    let x = 0, y = 0;
    let tx = 1, ty = 1;
    app.ticker.add((delta) => {
      x += delta * tx
      y += delta * ty
      if (x > 500 || x < 0) {
        tx = -tx
      }
      if (y > 200 || y < 0) {
        ty = -ty
      }
      sprite.x = x;
      sprite.y = y;
    });
  }, [])
  
  return (
    <div id="app">
    </div>
  )
}

export default App
